<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
	<title>监测数据列表</title>
	<script src="/js/jquery-2.0.0.min.js" type="text/javascript" charset="utf-8"></script>
	<th:block th:include="include :: header('监测数据曲线图')" />
	<th:block th:include="include :: datetimepicker-css" />
	<script src="/js/echarts.min.js"></script>
	<style type="text/css">
		.echarts {
			width: 100%;
			height: calc(100vh - 106px);
		}

		.table-striped {
			width: 100%;
			height: calc(100vh - 130px);
			overflow-y: auto;
			background-color: #fff;
			.chart-container {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 10px;
				box-sizing: border-box;
				width: 100%;

				.mini-echarts {
					width: calc(100% / 3 - 20px);
					height: calc(50vh - 100px);
					margin: 10px;
					box-sizing: border-box;
				}

				.echarts {
					width: calc(100% - 20px);
					height: calc(100vh - 175px);
					margin: 10px;
					box-sizing: border-box;
				}
			}

			.acc-chart,
			.dip-chart {
				display: none;
			}

			.active {
				display: flex;
			}
		}
	</style>
</head>

	<body class="gray-bg">
		<div class="ui-layout-center">
			<div class="container-div">
				<div class="row">
					<div class="col-sm-12 search-collapse">
						<form id="user-form">
							<div class="select-list">
								<ul>
									<li>
										风机：<select name="fanId">
											<option value="" style="display: none">请选择</option>
										</select>
									</li>
									<li>
										测项：<select name="funcitonId">
											<option value="" style="display: none">请选择</option>
										</select>
									</li>
									<li>
										测点：<select name="pointId" lay-search="">
											<option value="" style="display: none">请选择</option>
										</select>
									</li>
<!--									<li>-->
<!--										类型：<select name="target" lay-search="">-->
<!--										<option value="" style="display: none">请选择</option>-->
<!--									</select>-->
<!--									</li>-->
									<li class="select-time">
										<label>创建时间： </label>
										<input type="text" class="time-input" id="startDate" placeholder="开始时间"
											name="startDate" style="width: 140px !important;" />
										<span>-</span>
										<input type="text" class="time-input" id="endDate" placeholder="结束时间"
											name="endDate" style="width: 140px !important;" />
									</li>
									<li>
										<a class="btn btn-primary btn-rounded btn-sm" onclick="querySubmit()"><i
												class="fa fa-search"></i>&nbsp;查询</a>
										<a class="btn btn-primary btn-rounded btn-sm" onclick="changeArrange()">切换排列</a>
									</li>
								</ul>
							</div>
						</form>
					</div>

					<div class="col-sm-12 select-table table-striped">
						<!-- 加速度 -->
						<div class="chart-container acc-chart">
							<div id="chart1" class="mini-echarts"></div>
							<div id="chart2" class="mini-echarts"></div>
							<div id="chart3" class="mini-echarts"></div>
							<div id="chart4" class="mini-echarts"></div>
							<div id="chart5" class="mini-echarts"></div>
							<div id="chart6" class="mini-echarts"></div>
						</div>
						<!-- 倾角 -->
						<div class="chart-container dip-chart">
							<div id="dipChart1" class="mini-echarts"></div>
							<div id="dipChart2" class="mini-echarts"></div>
							<div id="dipChart3" class="mini-echarts"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		</div>
		<th:block th:include="include :: footer" />
		<th:block th:include="include :: layout-latest-js" />
		<script type="text/javascript">

			// layui 初始化
			layui.use('form', function () {
				var laydate = layui.laydate;

				//初始赋值
				laydate.render({
					elem: '#startDate'
					, type: 'datetime'
					, value: getDate('before')
					, isInitValue: true
				});

				//初始赋值
				laydate.render({
					elem: '#endDate'
					, type: 'datetime'
					, value: getDate()
					, isInitValue: true
				});
			})

			// 获取日期
			function getDate(type = 'current') {
				let date = new Date();

				if(type === 'before') {
					// 获取30天前的日期
					date.setTime(date.getTime() - 30 * 24 * 60 * 60 * 1000);
				}

				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				// 补零
				month = month < 10 ? '0' + month : month;
				day = day < 10 ? '0' + day : day;

				// 添加时分秒
				let time = type === 'current' ? '23:59:59' : '00:00:00';

				return year + '-' + month + '-' + day + ' ' + time;
			}

			var fandArr = [], functionArr = [], pointArr = [], chartType = null, targetArr = [];
			var chart1 = null, chart2 = null, chart3 = null, chart4 = null, chart5 = null, chart6 = null;

			// 初始化
			$(function () {
				let fanId = null, funcitonId = null, pointId = null, target = null;

				// 先绑定事件监听
				// 监听项目改变时
				$("[name='fanId']").on("change", function () {
					fanId = $(this).val();
					getCxData(fanId);
				});

				// 监听测项改变时
				$("[name='funcitonId']").on("change", function () {
					chartType = functionArr.find(item => item.id == $(this).val()).type;
					funcitonId = $(this).val();
					getCdData(fanId, funcitonId);
				});

				// 监听测点改变时
				$("[name='pointId']").on("change", function () {
					pointId = $(this).val();
				});

				// 监听类型改变时
				$("[name='target']").on("change", function () {
					target = $(this).val();
				});

				// 然后获取数据并手动触发change
				getPorjectData();
			})

			// 获取项目数据
			function getPorjectData() {
				$.ajax({
					url: "commom/getFanListForSensor",
					Type: "post",
					dataType: "json",
					async: false,
					success: (data) => {
						fandArr = [...data];
						let str = ""
						data.forEach((item) => {
							str += `<option value="${item.id}">${item.fanName}</option>`
						})
						$("[name='fanId']").append(str);
						// 自动选择第一条数据并手动触发change事件
						if(data.length > 0) {
							$("[name='fanId']").val(data[0].id).change();
						}
					},
				})
			}

			// 获取测项数据
			function getCxData(fanId) {
				$.ajax({
					url: "commom/getFunctionListForFan",
					Type: "post",
					data: {
						fanId: fanId
					},
					dataType: "json",
					async: false,
					success: (data) => {
						functionArr = [...data];
						let str = ""
						data.forEach((item) => {
							str += `<option value="${item.id}">${item.name}</option>`
						})
						$("[name='funcitonId']").find("option").slice(1).remove();
						$("[name='funcitonId']").append(str);
						// 自动选择第一条数据并手动触发change事件
						if(data.length > 0) {
							$("[name='funcitonId']").val(data[0].id).change();
						} else {
							$("[name='pointId']").find("option").slice(1).remove();
							pointId = null;
						}
					},
				})
			}

			// 获取测点数据
			function getCdData(fanId, funcitonId) {
				$.ajax({
					url: "commom/getPointListForSensor",
					Type: "post",
					data: {
						fanId: fanId,
						functionId: funcitonId
					},
					dataType: "json",
					async: false,
					success: (data) => {
						pointArr = [...data];
						let str = ""
						data.forEach((item) => {
							str += `<option value="${item.id}">${item.pointName}</option>`
						})
						$("[name='pointId']").find("option").slice(1).remove();
						$("[name='pointId']").append(str);
						// 自动选择第一条数据
						if(data.length > 0) {
							$("[name='pointId']").val(data[0].id);
							querySubmit()
						}
					},
				})
			}

			// 获取类型数据
			function getTarget() {
				let url = ""
				if (chartType == 'ACC') {
					url = "acc/getTarget"
				}
				if (chartType == 'DIP') {
					url = "dip/getTarget"
				}
				$.ajax({
					url: url,
					Type: "get",
					dataType: "json",
					async: false,
					success: (res) => {
						targetArr = [...res.data];
						let str = ""
						res.data.forEach((item) => {
							str += `<option value="${item}">${item}</option>`
						})
						$("[name='target']").find("option").slice(1).remove();
						$("[name='target']").append(str);
						// 自动选择第一条数据
						if(res.data.length > 0) {
							$("[name='target']").val(res.data[0]);
						}
					}
				})
			}

			// 切换排列
			function changeArrange() {
				$('.chart-container').each(function() {
					$(this).find('div').each(function() {
						if($(this).hasClass('echarts')) {
							$(this).removeClass('echarts').addClass('mini-echarts');
						} else if($(this).hasClass('mini-echarts')) {
							$(this).removeClass('mini-echarts').addClass('echarts');
						}
					});
				});

				// 触发resize事件以重新调整图表大小
				window.dispatchEvent(new Event('resize'));
			}

			// 查询提交
			function querySubmit() {
				const form = document.getElementById('user-form');
				const formData = {};
				const elements = form.elements;
				for (let i = 0; i < elements.length; i++) {
					const element = elements[i];
					if (element.name) {
						formData[element.name] = element.value;
					}
				}

				if (!formData.fanId) {
					layer.msg('风机必须选择', { icon: 5 });
					return false;
				}

				if (!formData.funcitonId) {
					layer.msg('测项必须选择');
					return false;
				}

				if (!formData.pointId) {
					layer.msg('测点必须选择', {
						time: 1000
					});
					return false;
				}

				// if (!formData.target) {
				// 	layer.msg('类型必须选择', {
				// 		time: 1000
				// 	});
				// 	return false;
				// }

				if (!formData.startDate) {
					layer.msg('开始日期必须选择', {
						time: 1000
					});
					return false;
				}

				if (!formData.endDate) {
					layer.msg('结束日期必须选择', {
						time: 1000
					});
					return false;
				}

				// 根据 chartType 切换显示的图表容器
				if (chartType === 'ACC') {
					$('.acc-chart').addClass('active');
					$('.dip-chart').removeClass('active');
					getAccCurveGroupData(formData)
				} else {
					$('.acc-chart').removeClass('active');
					$('.dip-chart').addClass('active');
					getDipCurveGroupData(formData)
				}
			}

			// 获取倾角曲线图多组数据
			function getDipCurveGroupData(formData) {
				$.ajax({
					url: "dip/getDipDataGroupGraph",
					Type: "post",
					data: {
						...formData
					},
					dataType: "json",
					async: false,
					success: (res) => {
						this.initDipChart(res.data)
					}
				})
			}

			// 获取加速度曲线图多组数据
			function getAccCurveGroupData(formData, data = []) {
				$.ajax({
					url: "acc/getAccDataGroupGraph",
					Type: "post",
					data: {
						...formData
					},
					dataType: "json",
					async: false,
					success: (res) => {
						getAccFrequency(formData, res.data)
					}
				})
			}

			// 获取加速度频率数据
			function getAccFrequency(formData, data = []) {
				$.ajax({
					url: "acc/getAccDataGroupGraphForPR",
					Type: "post",
					data: {
						...formData
					},
					dataType: "json",
					async: false,
					success: (res) => {
						this.initAccChart(data,res.data)
					}
				})
			}

			function initAccChart(data = [], data1 = []) {
				// 销毁旧的图表实例
				const chartIds = ['chart1', 'chart2', 'chart3', 'chart4', 'chart5', 'chart6'];
				chartIds.forEach(id => {
					const chart = echarts.getInstanceByDom(document.getElementById(id));
					if (chart) {
						chart.dispose();
					}
				});
				
				// 初始化新的图表
				const charts = chartIds.map(id => echarts.init(document.getElementById(id)));

				// 添加resize监听
				window.addEventListener('resize', function() {
					charts.forEach(chart => chart.resize());
				});

				let option = {
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						show: true
					},
					grid: {
						left: 50,
						right: 50,
						bottom: 50,
						top: 50,
						containLabel: true
					},
					yAxis: {
						name: "g",
						type: 'value'
					}
				}

				let chart1Data = data.list[0].map(item => item.dataList)
				let xData = data.list[0].map(item => item.time)
				let xSeries = [
					{
						name: 'X向平均值',
						type: 'line',
						stack: 'Total',
						data: chart1Data.map(item => item[0])
					},
					{
						name: 'X向最大值',
						type: 'line',
						stack: 'Total',
						data: chart1Data.map(item => item[1])
					},
					{
						name: 'X向最小值',
						type: 'line',
						stack: 'Total',
						data: chart1Data.map(item => item[2])
					},
					{
						name: 'X向有效值',
						type: 'line',
						stack: 'Total',
						data: chart1Data.map(item => item[3])
					}
				]
				let xOption = {
					...option,
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: xData
					},
					series: xSeries
				}

				if (chart1Data[0].length > 0) {
					xOption && charts[0].setOption(xOption)
				}

				let chart2Data = data.list[1].map(item => item.dataList)
				let yData = data.list[1].map(item => item.time)
				let ySeries = [
					{
						name: 'Y向平均值',
						type: 'line',
						stack: 'Total',
						data: chart2Data.map(item => item[0])
					},
					{
						name: 'Y向最大值',
						type: 'line',
						stack: 'Total',
						data: chart2Data.map(item => item[1])
					},
					{
						name: 'Y向最小值',
						type: 'line',
						stack: 'Total',
						data: chart2Data.map(item => item[2])
					},
					{
						name: 'Y向有效值',
						type: 'line',
						stack: 'Total',
						data: chart2Data.map(item => item[3])
					}
				]
				let yOption = {
					...option,
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: yData
					},
					series: ySeries
				}

				if (chart2Data[0].length > 0) {
					yOption && charts[1].setOption(yOption)
				}

				let chart3Data = data.list[2].map(item => item.dataList)
				let zData = data.list[2].map(item => item.time)
				let zSeries = [
					{
						name: 'Z向平均值',
						type: 'line',
						stack: 'Total',
						data: chart3Data.map(item => item[0])
					},
					{
						name: 'Z向最大值',
						type: 'line',
						stack: 'Total',
						data: chart3Data.map(item => item[1])
					},
					{
						name: 'Z向最小值',
						type: 'line',
						stack: 'Total',
						data: chart3Data.map(item => item[2])
					},
					{
						name: 'Z向有效值',
						type: 'line',
						stack: 'Total',
						data: chart3Data.map(item => item[3])
					}
				]

				let zOption = {
					...option,
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: zData
					},
					series: zSeries
				}

				zOption && charts[2].setOption(zOption)

				let powerRateOption = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						}
					},
					legend: {
						show: true
					},
					grid: {
						left: 50,
						right: 50,
						bottom: 50,
						top: 50,
						containLabel: true
					},
					yAxis: [
						{
							type: 'value',
							name: '频率',
							position: 'left'
						},
						{
							type: 'value',
							name: '功率',
							position: 'right'
						}
					]
				}

				let chart4LeftData = data1.list[0].map(item => item.dataListForRate)
				let chart4RightData = data1.list[0].map(item => item.dataListForPower)
				let chart4XData = data1.list[0].map(item => item.time)
				let chart4Series = [
						{
							name: 'X向主振频率',
							type: 'line',
							data: chart4LeftData.map(item => item[0])
						},
						{
							name: 'X向主振功率',
							type: 'line',
							yAxisIndex: 1,
							data: chart4RightData.map(item => item[0])
						},
						{
							name: 'X次振频率',
							type: 'line',
							data: chart4LeftData.map(item => item[1])
						},
						{
							name: 'X向次振功率',
							type: 'line',
							yAxisIndex: 1,
							data: chart4RightData.map(item => item[1])
						},
						{
							name: 'X向季振频率',
							type: 'line',
							data: chart4LeftData.map(item => item[2])
						},
						{
							name: 'X向季振功率',
							type: 'line',
							yAxisIndex: 1,
							data: chart4RightData.map(item => item[2])
						}
				]

				let chart4Option = {
					...powerRateOption,
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: chart4XData
					},
					series: chart4Series
				}

				chart4Option && charts[3].setOption(chart4Option)

				let chart5LeftData = data1.list[1].map(item => item.dataListForPower)
				let chart5RightData = data1.list[1].map(item => item.dataListForRate)
				let chart5XData = data1.list[1].map(item => item.time)
				let chart5Series = [
						{
							name: 'Y向主振频率',
							type: 'line',
							data: chart5LeftData.map(item => item[0])
						},
						{
							name: 'Y向主振功率',
							type: 'line',
							yAxisIndex: 1,
							data: chart5RightData.map(item => item[0])
						},
						{
							name: 'Y次振频率',
							type: 'line',
							data: chart5LeftData.map(item => item[1])
						},
						{
							name: 'Y向次振功率',
							type: 'line',
							yAxisIndex: 1,
							data: chart5RightData.map(item => item[1])
						},
						{
							name: 'Y向季振频率',
							type: 'line',
							data: chart5LeftData.map(item => item[2])
						},
						{
							name: 'Y向季振功率',
							type: 'line',
							yAxisIndex: 1,
							data: chart5RightData.map(item => item[2])
						}
				]

				let chart5Option = {
					...powerRateOption,
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: chart5XData
					},
					series: chart5Series
				}

				chart5Option && charts[4].setOption(chart5Option)

				let chart6LeftData = data1.list[2].map(item => item.dataListForPower)
				let chart6RightData = data1.list[2].map(item => item.dataListForRate)
				let chart6XData = data1.list[2].map(item => item.time)
				let chart6Series = [
						{
							name: 'Z向主振频率',
							type: 'line',
							data: chart6LeftData.map(item => item[0])
						},
						{
							name: 'Z向主振功率',
							type: 'line',
							yAxisIndex: 1,
							data: chart6RightData.map(item => item[0])
						},
						{
							name: 'Z次振频率',
							type: 'line',
							data: chart6LeftData.map(item => item[1])
						},
						{
							name: 'Z向次振功率',
							type: 'line',
							yAxisIndex: 1,
							data: chart6RightData.map(item => item[1])
						},
						{
							name: 'Z向季振频率',
							type: 'line',
							data: chart6LeftData.map(item => item[2])
						},
						{
							name: 'Z向季振功率',
							type: 'line',
							yAxisIndex: 1,
							data: chart6RightData.map(item => item[2])
						}
				]

				let chart6Option = {
					...powerRateOption,
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: chart6XData
					},
					series: chart6Series
				}

				chart6Option && charts[5].setOption(chart6Option)
			}

			// 初始化倾角曲线图
			function initDipChart(data = []) {
				// 销毁旧的图表实例
				const chartIds = ['dipChart1', 'dipChart2', 'dipChart3'];
				chartIds.forEach(id => {
					const chart = echarts.getInstanceByDom(document.getElementById(id));
					if (chart) {
						chart.dispose();
					}
				});
				
				// 初始化新的图表
				const charts = chartIds.map(id => echarts.init(document.getElementById(id)));

				// 添加resize监听
				window.addEventListener('resize', function() {
					charts.forEach(chart => chart.resize());
				});

				let option = {
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						show: true
					},
					grid: {
						left: 50,
						right: 50,
						bottom: 50,
						top: 50,
						containLabel: true
					},
					yAxis: {
						type: 'value'
					}
				}

				let chart1Data = data.list[0].map(item => item.dataList)
				let xData = data.list[0].map(item => item.time)
				let xSeries = [
					{
						name: 'X向平均值',
						type: 'line',
						stack: 'Total',
						data: chart1Data.map(item => item[0])
					},
					{
						name: 'X向最大值',
						type: 'line',
						stack: 'Total',
						data: chart1Data.map(item => item[1])
					},
					{
						name: 'X向最小值',
						type: 'line',
						stack: 'Total',
						data: chart1Data.map(item => item[2])
					},
					{
						name: 'X向有效值',
						type: 'line',
						stack: 'Total',
						data: chart1Data.map(item => item[3])
					}
				]
				let xOption = {
					...option,
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: xData
					},
					series: xSeries
				}


				xOption && charts[0].setOption(xOption)

				let chart2Data = data.list[1].map(item => item.dataList)
				let yData = data.list[1].map(item => item.time)
				let ySeries = [
					{
						name: 'Y向平均值',
						type: 'line',
						stack: 'Total',
						data: chart2Data.map(item => item[0])
					},
					{
						name: 'Y向最大值',
						type: 'line',
						stack: 'Total',
						data: chart2Data.map(item => item[1])
					},
					{
						name: 'Y向最小值',
						type: 'line',
						stack: 'Total',
						data: chart2Data.map(item => item[2])
					},
					{
						name: 'Y向有效值',
						type: 'line',
						stack: 'Total',
						data: chart2Data.map(item => item[3])
					}
				]
				let yOption = {
					...option,
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: yData
					},
					series: ySeries
				}

				yOption && charts[1].setOption(yOption)

				let chart3Data = data.list[2].map(item => item.dataList)
				let zData = data.list[2].map(item => item.time)
				let zSeries = [
					{
						name: 'Z向平均值',
						type: 'line',
						stack: 'Total',
						data: chart3Data.map(item => item[0])
					},
					{
						name: 'Z向最大值',
						type: 'line',
						stack: 'Total',
						data: chart3Data.map(item => item[1])
					},
					{
						name: 'Z向最小值',
						type: 'line',
						stack: 'Total',
						data: chart3Data.map(item => item[2])
					},
					{
						name: 'Z向有效值',
						type: 'line',
						stack: 'Total',
						data: chart3Data.map(item => item[3])
					}
				]

				let zOption = {
					...option,
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: zData
					},
					series: zSeries
				}

				zOption && charts[2].setOption(zOption)

			}
		</script>
	</body>

</html>